<template>
  <div>
    <div class="container">
      <div class="container-left">
        <div class="card">
          <img :src="article.userImg" class="avtar" alt="" id="imges" >
          <h3>{{ article.writer }}</h3>
          <div class="counter">
              <span>分类: {{ article.catalogue }}</span>
          </div>
          <div class="counter">
              <span @click="setLikes()" id="a123456">
                <img src="../../public/img/like.png" alt="" style="width: 50%;" v-if="!isUpvote">
                <img src="../../public/img/like1.png" alt="" v-else style="width: 50%;" >
              </span>
              <span @click="setComment()" id="a456">
                <img src="../../public/img/collect.png" alt=""  style="width: 50%;" v-if="!isComment">
                <img src="../../public/img/star123.png" alt="" v-else style="width: 50%;" >
              </span>
          </div>
          <div class="counter1">
              <span>{{ article.likes }}</span>
              <span>{{ article.collectNumber }}</span>
          </div>
        </div>
      </div>
      <div class="container-right">
        <div class="blog">
          <div class="title">{{ article.title }}</div>
          <div class="date">{{ arguments.pubData }}</div>
          <div class="desc">
            {{ article.passage }}
          </div>
        </div>
        <div class="review">
          <el-input
            v-model="textarea1"
            style="width: 75%"
            autosize
            type="textarea"
            placeholder="Please input"
          />
          <el-button :round="true" style="margin-left: 10%;" @click="setReview()">评论</el-button>
          <div class="leave" v-for="item in article.comments" :key="item.id">
            <el-avatar :size="50" :src="item.imgUrl" />
            <div id="message">
              <div id="name" style="color: red;"> {{ item.userName}}： </div>
              <div id="nameMessage">{{ item.text }}</div>
              <div id="time" style="font-weight: 100;color: rgb(147,147,147);"> {{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import{useRoute} from 'vue-router'
import { ref,onMounted } from 'vue'
import axios from '../utils/axios'
import { ElMessage } from 'element-plus'
let route =useRoute()
let id = ref('')
let article = ref({})
let textarea1 = ref('')
let isUpvote = ref(false)
let isComment = ref(false)
onMounted(() => {
  details()
})
async function details(){
  id.value = route.params.id
  const {data} = await axios.get(`getContent?id=${id.value}`)
  article.value = data.data
  isUpvote.value = data.data.isUpvote
  isComment.value = data.data.isCollect
}
function setReview(){
  if(textarea1.value.length === 0){
    ElMessage({
      message:'评论不能为空',
      type: 'error',
      center: true,
      duration: 1000
    })
  }
  axios.get(`comment?id=${id.value}&text=${textarea1.value}`)
  textarea1.value = ''
  ElMessage({
    message:'评论成功',
    type: 'success',
    center: true,
    duration: 1000
  })
  setTimeout(() => {
    details()
  },1000)
}
function setLikes(){
  axios.get(`upvote?id=${id.value}`)
  isUpvote.value = !isUpvote.value
  if(isUpvote.value) article.value.likes += 1
  else{
    if(article.value.likes !== '0') article.value.likes -= 1
  }
}
function setComment(){
  axios.get(`collect?id=${id.value}`)
  isComment.value = !isComment.value
  if(isComment.value) article.value.collectNumber += 1
  else{
    if(article.value.collectNumber !== '0') article.value.collectNumber -= 1
  }
}
</script>

<style scoped>
.container {
  width: 70%;
  margin-left: 15%;
  display: flex;
  justify-content: space-between;
}
.container-left {
  height: 200px;
  width: 20%;
}
.container-right {
  height: 600px;
  width: 79.5%;
  overflow: auto;
  background-color: rgba(5, 255, 255, 0.8);
  border-radius: 10px;
}
.card {
  background-color: rgba(5, 255, 255, 0.8);
  border-radius: 10px;
  padding: 30px;
}
.card #imges {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.card h3 {
  text-align: center;
  padding: 10px;
}
.card a {
  display: block;
  text-align: center;
  color: #999;
  text-decoration: none;
  padding: 10px;
}
.card .counter {
  padding: 5px;
  display: flex;
  justify-content: space-around;
}
.blog {
  width: 100%;
  padding: 10px 20px;
}
.blog .title {
  color: black;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
}
.blog .desc {
  color: #000;
  text-indent: 2em;
  margin-top: 10px;
}
.blog .date {
  color: #008000;
  margin-top: 10px;
  text-align: center;
}
.review{
  margin-left: 10%;
}
.leave{
  margin-top: 20px;
}
#message{
  margin-top: -55px;
  margin-left: 10%;
}
#nameMessage{
  margin-top: -24px;
  margin-left: 6%;
}
.counter1{
  padding: 5px;
  display: flex;
  justify-content: space-around;
  margin-left: -10%;
}
.avtar{
  margin-left: 9%;
}
#a123456{
   margin-left: 9%;
}
#a456{
  margin-left: 18%;
}

</style>